<!-- html代码  -->
<template>
    <div class="bottom-chart">
        <Title :title="title"></Title>
        <!-- 完美大气层容器 -->
        <div class="atmosphere-container">
            <!-- 背景图片 -->
            <div class="atmosphere-bg"></div>
            <!-- 湿度显示圆环 -->
            <div class="humidity-circle">
                <span class="humidity-value">{{ humidityValue }}%</span>
                <span class="humidity-label">湿度</span>
            </div>
            <!-- 云层效果 -->
            <div class="clouds-layer"></div>
            <!-- 空气质量指标 -->
            <div class="air-quality">
                <div class="air-quality-item" v-for="(item, index) in airQualityData" :key="index">
                    <span class="item-name">{{ item.name }}</span>
                    <div class="item-value" :style="{ color: getValueColor(item.value, item.type) }">
                        {{ item.value }}{{ item.unit }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
// 引入请求方法
import { get } from '../../utils/request';
// 从公共仓库获取ed数据
import { mapState } from 'vuex';
// 引入处理时间的工具
import moment from 'moment';

export default {
    data() {
        return {
            title: '完美大气层',
            humidityValue: 68,
            // 空气质量指标数据
            airQualityData: [
                { name: '温度', value: 24.5, unit: '°C', type: 'temperature' },
                { name: 'PM2.5', value: 35, unit: '', type: 'pm25' },
                { name: '气压', value: 1013, unit: 'hPa', type: 'pressure' },
                { name: '二氧化碳', value: 420, unit: 'ppm', type: 'co2' }
            ],
            // 请求参数
            params: {
                page: 1,
                pageSize: 10
            },
            // 定时器ID
            timerId: null
        }
    },
    computed: {
        ...mapState(['ed'])
    },
    watch: {
        ed: {
            handler(n) {
                this.params.device_id = n.device_id;
                this.params.engineer_id = n.engineer_id;
                // 重新获取数据
                this.getAtmosphereData();
            },
            deep: true
        }
    },
    methods: {
        // 获取空气质量数据
        async getAtmosphereData() {
            try {
                const res = await get('/dashboard/pageQueryTodayData', this.params);
                console.log('大气层数据响应:', res);
                
                if (res.data?.list?.length) {
                    // 获取最新的一条数据
                    const latestData = res.data.list[0];
                    
                    // 更新湿度值 (使用真实数据或基于温度生成模拟数据)
                    const humidityValue = typeof latestData.humidity === 'number' ? 
                        latestData.humidity : (40 + Math.random() * 30);
                    this.humidityValue = Math.round(humidityValue);
                    
                    // 更新空气质量指标
                    this.updateAirQualityData(latestData);
                } else {
                    // 如果没有数据，使用模拟数据
                    this.generateMockData();
                }
            } catch (error) {
                console.error('获取大气层数据失败:', error);
                // 使用模拟数据
                this.generateMockData();
            }
        },
        
        // 更新空气质量指标数据
        updateAirQualityData(data) {
            try {
                // 调试输出
                console.log('原始数据:', data);
                
                // 更新温度 - 修复toFixed错误
                const tempIndex = this.airQualityData.findIndex(item => item.type === 'temperature');
                if (tempIndex !== -1) {
                    let tempValue = 20; // 默认值
                    
                    // 安全地获取温度值
                    if (typeof data.temperature === 'number') {
                        tempValue = data.temperature;
                    } else {
                        tempValue = 15 + Math.random() * 15;
                    }
                    
                    this.airQualityData[tempIndex].value = parseFloat(tempValue.toFixed(1));
                }
                
                // 更新PM2.5
                const pm25Index = this.airQualityData.findIndex(item => item.type === 'pm25');
                if (pm25Index !== -1) {
                    let pm25Value = typeof data.pm25 === 'number' ? data.pm25 : (10 + Math.random() * 70);
                    this.airQualityData[pm25Index].value = Math.round(pm25Value);
                }
                
                // 更新气压
                const pressureIndex = this.airQualityData.findIndex(item => item.type === 'pressure');
                if (pressureIndex !== -1) {
                    let pressureValue = typeof data.pressure === 'number' ? data.pressure : (990 + Math.random() * 40);
                    this.airQualityData[pressureIndex].value = Math.round(pressureValue);
                }
                
                // 更新二氧化碳
                const co2Index = this.airQualityData.findIndex(item => item.type === 'co2');
                if (co2Index !== -1) {
                    let co2Value = typeof data.co2 === 'number' ? data.co2 : (380 + Math.random() * 100);
                    this.airQualityData[co2Index].value = Math.round(co2Value);
                }
            } catch (error) {
                console.error('更新数据时出错:', error);
                // 错误发生时使用模拟数据
                this.generateMockData();
            }
        },
        
        // 生成模拟数据
        generateMockData() {
            // 模拟湿度数据
            this.humidityValue = Math.round(40 + Math.random() * 40);
            
            // 模拟空气质量指标数据
            this.airQualityData = [
                { name: '温度', value: parseFloat((15 + Math.random() * 15).toFixed(1)), unit: '°C', type: 'temperature' },
                { name: 'PM2.5', value: Math.round(10 + Math.random() * 70), unit: '', type: 'pm25' },
                { name: '气压', value: Math.round(990 + Math.random() * 40), unit: 'hPa', type: 'pressure' },
                { name: '二氧化碳', value: Math.round(380 + Math.random() * 100), unit: 'ppm', type: 'co2' }
            ];
        },
        
        // 根据值获取对应的颜色
        getValueColor(value, type) {
            // 湿度颜色范围
            if (type === 'temperature') {
                if (value < 10) return '#00a8ff'; // 冷
                if (value < 20) return '#4cd137'; // 适中
                if (value < 28) return '#fbc531'; // 温暖
                return '#e84118'; // 热
            }
            
            // PM2.5颜色范围
            if (type === 'pm25') {
                if (value <= 35) return '#4cd137'; // 优
                if (value <= 75) return '#fbc531'; // 良
                if (value <= 150) return '#e84118'; // 轻度污染
                return '#c23616'; // 中度污染以上
            }
            
            // 默认颜色 - 蓝色
            return '#00a8ff';
        },
        
        // 开始定时获取数据
        startDataFetching() {
            // 立即获取一次数据
            this.getAtmosphereData();
            
            // 设置定时器，每30秒获取一次数据
            this.timerId = setInterval(() => {
                this.getAtmosphereData();
            }, 30000);
        },
        
        // 停止定时获取数据
        stopDataFetching() {
            if (this.timerId) {
                clearInterval(this.timerId);
                this.timerId = null;
            }
        }
    },
    mounted() {
        // 启动定时获取数据
        this.startDataFetching();
    },
    beforeDestroy() {
        // 组件销毁前清除定时器
        this.stopDataFetching();
    }
}
</script>

<style lang="less" scoped>
.bottom-chart {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.atmosphere-container {
    flex: 1;
    position: relative;
    margin-top: 5px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 0 15px rgba(0, 140, 255, 0.3);
}

.atmosphere-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('https://img.freepik.com/free-vector/realistic-clouds-background-blue-sky_23-2149156633.jpg');
    background-size: cover;
    background-position: center;
    opacity: 0.8;
    filter: brightness(0.8);
}

.humidity-circle {
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.4);
    border: 3px solid rgba(255, 255, 255, 0.7);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 20px rgba(0, 140, 255, 0.5);
}

.humidity-value {
    font-size: 36px;
    font-weight: bold;
}

.humidity-label {
    font-size: 16px;
    margin-top: 3px;
}

.clouds-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('https://img.freepik.com/free-vector/realistic-white-clouds-isolated-transparent-background_107791-1591.jpg');
    background-size: cover;
    background-position: center;
    opacity: 0.3;
    animation: clouds-move 60s linear infinite;
}

.air-quality {
    position: absolute;
    bottom: 20px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-around;
    padding: 0 20px;
}

.air-quality-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
}

.item-name {
    font-size: 14px;
    margin-bottom: 5px;
}

.item-value {
    font-size: 18px;
    font-weight: bold;
}

@keyframes clouds-move {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 100% 50%;
    }
}
</style>